<!--
 * @description  : 从业人员登记组件
 * @descriptionDetail: 从业人员登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-12 18:43:02
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="false" title="从业人员登记" :customBack="handlerBack">
      <view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">
        确定
      </view>
    </theme-navbar>
    <u-form :model="personForm" style="padding: 0px 10px;" label-position="top" ref="uForm" :error-type="['border-bottom', 'message',]">
      <u-form-item label="姓名" required prop="personName" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.personName" />
      </u-form-item>
      <u-form-item label="与持证人/经营者关系" required prop="relationshipName" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" :needValid="true" placeholder="请选择" :disabled="true" v-model="personForm.relationshipName" @tap="handlerShowDict('relationshipName', 'relationshipName', 'relationship')" />
      </u-form-item>
      <u-form-item label="性别" required prop="personGenderName" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" :needValid="true" placeholder="请选择" :disabled="true" v-model="personForm.personGenderName" @tap="handlerShowDict('S_BSC_GENDDER', 'personGenderName', 'personGender')" />
      </u-form-item>
      <u-form-item label="证件类型" required prop="credTypeName" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" :needValid="true" placeholder="请选择" :disabled="true" v-model="personForm.credTypeName" @tap="handlerShowDict('S_BSC_IDCARD_TYPE', 'credTypeName', 'credType')" />
      </u-form-item>
      <u-form-item label="证件号码" prop="credNum" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.credNum" />
      </u-form-item>
      <u-form-item label="证件地址" prop="credAddr" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.credAddr" />
      </u-form-item>
      <u-form-item label="现居住地址" prop="currentAddr" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.currentAddr" />
      </u-form-item>
      <u-form-item label="手机" prop="contactMobile" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.contactMobile" />
      </u-form-item>
      <u-form-item label="座机" prop="contactLine" :label-width="180">
        <u-input :custom-style="valueStyle" :disabled="isDisabled" v-model="personForm.contactLine" />
      </u-form-item>
      <u-form-item label="民族" prop="personLocalName" :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" placeholder="请选择" :disabled="true" v-model="personForm.personLocalName" @tap="handlerShowDict('S_BSC_NATION', 'personLocalName', 'personLocal')" />
      </u-form-item>
      <u-form-item label="籍贯" prop="nativePlaceName"  required :label-width="180" right-icon="arrow-right">
        <u-input :custom-style="pointerStyle" placeholder="请选择籍贯" :disabled="true" v-model="personForm.nativePlaceName" @tap="areaOpen=true" />
      </u-form-item>
    </u-form>
    <u-select
      :list="commonDicts"
      :mask-close-able="false"
      v-model="commonDictShow" 
      @cancel="handlerCommonSelect"
      @confirm="handlerCommonConfirm($event)"
    ></u-select>
    <u-popup mode="bottom" height="80%" border-radius="16" v-model="areaOpen">
      <area-select @choose="handlerChooseArea"></area-select>
    </u-popup>
  </view>
</template>

<script>
import areaSelect from "@/components/area-select.vue"
export default {
  components: {
    areaSelect,
  },
  props: {
    cyData: {
      type: Object,
      default: () => {},
    },
    isHaveLicense: {
      type: Boolean,
      default: true,
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      valueStyle: {
        marginRight: "5px",
      },
      personForm:{
        uuid: "",
        personName: "",
        relationship: "",
        relationshipName: "",
        personGender: "",
        personGenderName: "",
        credType: "",
        credTypeName: "",
        credNum: "",
        credAddr: "",
        currentAddr: "",
        contactMobile: "",
        contactLine: "",
        personNative: "",
        personNativeName: "",
        personLocal: "",
        personLocalName: "",
      },
      rules:{
        personName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'blur',],
          },
        ],
        nativePlaceName: [
          {
            required: true,
            message: '请输入籍贯',
            trigger: ['change', 'blur',],
          },
        ],
        relationshipName: [
          {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur',],
          },
        ],
        personGenderName: [
          {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur',],
          },
        ],
        credTypeName: [
          {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur',],
          },
        ],
        contactMobile: [
          {
            validator: (rule, value) => {
              return !value || this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change','blur',],
          },
        ],
        contactLine: [
          {
            validator: (rule, value) => {
              return !value || this.$u.test.tel(value);
            },
            message: '座机号码不正确',
            trigger: ['change','blur',],
          },
        ],
        credNum: [
          {
            validator: (rule, value) => {
              return !value || this.personForm.credType != '01' || this.$u.test.idCard(value);
            },
            message: '身份证号码不正确',
            trigger: ['change','blur',],
          },
        ],
      },
      areaOpen: false,
      commonDicts: [],  // 公共字典
      commonDictShow: false,  // 公共字典显示
      dictType: "",   // 字典类型
      dictLabel: "",
      dictValue: "",
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			pointerStyle: {
			  marginRight: "5px",
				pointerEvents: "none !important"
			},
			// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
    }
  },
  onReady() {
    this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
  },
  mounted() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    Object.assign(this.personForm, this.cyData, );
    //处理行政区划显问题 2023-6-6 10:50:03 fsx start 
    if(!!this.personForm.personLocalCode) {
      let codes = this.personForm.personLocalCode.split(",");
      this.personForm.personLocal = this.$store.state.areaObj[codes[codes.length-1]];
    }
    //处理行政区划显问题 2023-6-6 10:50:03 fsx end
 
  },
  methods:{  
    // 选择行政区划
    handlerChooseArea(areas) {
      console.log("选中的区划", areas);
      this.personForm.nativePlace = [areas[0].proCode, areas[0].admdivCode, areas[0].countryCode,].join(",");
      if(this.$modal.isMuniCity(areas[0].proCode)){
        this.personForm.nativePlaceName = [areas[0].admdivName, areas[0].countryName,].join("");
      }else{
        this.personForm.nativePlaceName = [areas[0].proName, areas[0].admdivName, areas[0].countryName,].join("");
      }
      this.areaOpen = false;
    },
    // 显示字典选择
    handlerShowDict(dictType, label, v) {
      if (this.isDisabled) {
        return;
      }
      this.dictLabel = label;
      this.dictValue = v;
      if (dictType == 'relationshipName') {
        this.commonDicts = this.$store.state.dicts[this.isHaveLicense ? 'L_RELATIONSHIP' : 'L_RELATION_TYPE'];
      } else {
        this.commonDicts = this.$store.state.dicts[dictType];
      }
      console.log(this.commonDicts);
      this.commonDictShow = true;
    },
    // 选择公共字典
    handlerCommonSelect() {
      this.commonDictShow = false;
      this.$forceUpdate();
    },
    // 公共字典点击确认
    handlerCommonConfirm(e) {
      console.log(e);
      this.personForm[this.dictLabel] = e[0].label;
      this.personForm[this.dictValue] = e[0].value;
      this.commonDictShow = false;
      this.$forceUpdate();
    },
    // 确认事件
    confirmBtn(){
      this.$refs.uForm.validate(valid => {
        if (valid) { 
          this.$emit("back", this.personForm);
          console.log('表单验证通过');
        }
      });     
    },
    handlerBack() {
      this.$emit("back", null);
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
